<template>
  <div>
    <van-popup
      v-model="isShowPopup"
      @click-overlay="overlay"
      :close-on-click-overlay="false"
      safe-area-inset-bottom
      custom-style="height: 20%, width:100%"
      class="popupContent"
      position="bottom"
    >
      <div class="closePopup" @click="handleClosePopup">
        <svg-icon icon="icon-xiala"></svg-icon>
      </div>
      <div class="analysisTitle">
        <div class="analysisName">
          <div>{{ titleName }}</div>
          <div>{{ pupDimName }}</div>
          <div v-if="titleDim !== undefined">{{ '-' + titleDim }}</div>
        </div>
        <div class="analysisNumber">{{ titleNumber | dataFormat(dataType) }}</div>
      </div>
      <!-- <div
       v-if="buttonType === 'fixButton'"
        :class="detailPopupLine"
      >
        <div class="bottomline"></div>
      </div> -->
      <div class="pupButtonGroup">
        <van-button
          :plain="false"
          class="pupButton"
          style="width: 78px"
          :type="defaultpupShow === 3 ? 'info' : 'default'"
          @click="handleDrilldownButton"
          v-if="buttonType === 'itemButton'"
          ><div class="istracked">下钻</div></van-button
        >
        <van-button
          :plain="false"
          class="pupButton"
          style="width: 78px"
          v-if="buttonType === 'itemButton'"
          :type="defaultpupShow === 1 ? 'info' : 'default'"
          @click="handleOverlappingButton"
          ><div class="istracked">交叉</div></van-button
        >
        <van-button
          type="default"
          style="margin-right: -1px; width: 78px"
          @click="handleAttribution"
          class="pupButton"
          v-if="buttonType === 'itemButton'"
          ><div class="istracked">归因</div></van-button
        >
        <!-- <van-button
          :plain="false"
          :type="istracked ? 'default' : 'info'"
          @click="handleTrackButtonOut"
          class="noModifyPupButton"
          style="margin-left:20px"
          @click="handleTrackButtonOut"
          class="noModifyPupButton"
          :type="istracked ? 'default' : 'info'"
          v-if="operationType === 'pivot' && buttonType === 'fixButton'"
          :disabled="istracked"
          style="margin-left:20px"
          >{{ istracked ? '已追踪' : '追踪' }}</van-button
        > -->
        <van-button
          :disabled="detailsIstracked"
          type="default"
          @click="handleTrackButton"
          class="pupButton"
          v-if="buttonType === 'itemButton'"
          ><div class="istracked">{{ detailsIstracked ? '已追踪' : '追踪' }}</div></van-button
        >
      </div>
      <div v-if="defaultpupShow !== 0 && buttonType === 'itemButton'" class="detailPopupLine">
        <div class="bottomline"></div>
      </div>
      <div v-if="modifyFilter === false" class="detailPopup"></div>
      <div>
        <transition name="fadeHeight" mode="out-in">
          <div v-if="defaultpupShow === 1">
            <overlapping
              @closepup="handleClosepup"
              @overLappingDetermine="handleOverLappingDetermine"
              :pupValue="pupValue"
              :buttonType="buttonType"
              :curData="curData"
            ></overlapping>
          </div>
          <div v-if="defaultpupShow === 3">
            <drilldown
              @closepup="handleClosepup"
              @drilldownDetermine="handleDrilldownDetermine"
              :pupValue="pupValue"
              :curData="curData"
              :buttonType="buttonType"
            ></drilldown>
          </div>
          <div v-if="defaultpupShow === 2">
            <!-- :textContent="textContent" -->
            <trackStatus
              @handleTrackButtonIn="handleTrackButtonIn"
              :overlapingItem="overlapingItem"
              :trackParame="trackParame"
              :filterData="curData.queryParams.filters"
              :fields="curData.detailContent.fields"
              :queryParams="curData.queryParams"
            ></trackStatus>
          </div>
        </transition>
      </div>
    </van-popup>
  </div>
</template>

<script>
import overlapping from './overlapping.vue'
import drilldown from './drilldown.vue'
import trackStatus from './trackStatus.vue'
import { unitFormat } from '@/filters/filter'
import sensormixin from '@/mixins'
export default {
  mixins: [sensormixin],
  /**
   是否展示弹窗isShowPopup
   选中的数据overlapingItem
   列表头部信息fields
   维度展示pupValue
   列表表格信息dataContent
   数据值类型dataType
   选择的是哪个按钮modifyPup
   页面头部信息header
   是否点击的是修改按钮modifyFilter
  **/
  props: [
    'curData',
    'dataType',
    'detailsIstracked',
    'trackStatusnum',
    'isShowPopup',
    'overlapingItem',
    'pupValue',
    'dataContent',
    'modifyPup',
    'modifyFilter',
    'buttonType',
    'operationType',
    'trackParame',
    'pupDimName'
  ],
  components: {
    overlapping,
    drilldown,
    trackStatus
  },
  data() {
    return {
      defaultpupShow: 0, // 默认选中第一个按钮及组件
      titleName: undefined, // 头部名称展示
      titleNumber: undefined, // 头部值展示
      titleDim: undefined, // 点击选中的列表名称展示
      headerContainer: {} // 页面头部信息
    }
  },
  methods: {
    handleTrackButtonIn() {
      this.$emit('handleTrackButtonIn')
    },
    handleTrackButtonOut() {
      this.$emit('handleTrackButtonOut')
    },
    // defaultpupShow为3表示下钻
    handleDrilldownButton() {
      this.defaultpupShow = 3
    },
    // defaultpupShow为1表示交叉
    handleOverlappingButton() {
      this.defaultpupShow = 1
    },
    handleTrackButton() {
      // this.$toast('功能建设中...')
      const status =
        ['', null, 'null'].includes(this.trackParame.indexValue) &&
        ['', null, 'null'].includes(this.trackParame.comparedValue)
      if (status) {
        this.$toast('该数据不能被追踪')
        return
      }
      this.defaultpupShow = 2
      // this.defaultpupShow = 0
    },
    // 点击空白处关闭弹窗
    overlay() {
      this.$emit('update:isShowPopup', false)
      this.$emit('closeDetailPup', false)
      this.defaultpupShow = 0
    },
    // 点击小图标关闭弹窗
    handleClosePopup() {
      this.$emit('closeDetailPup', false)
      this.defaultpupShow = 0
    },
    // 点击关闭按钮关闭弹窗
    handleClosepup(data) {
      this.$emit('closeDetailPup', data)
      this.defaultpupShow = 0
    },
    // 选中交叉维度
    handleOverLappingDetermine(isClose, activeId) {
      this.$emit('overLappingPuPDetermine', isClose, activeId, this.titleDim)
      this.defaultpupShow = 0
    },
    // 选中下钻维度
    handleDrilldownDetermine(isClose, activeId) {
      this.$emit('drilldownPuPDetermine', isClose, activeId, this.titleDim)
      this.defaultpupShow = 0
    },
    // 归因分析
    handleAttribution() {
      if (this.curData.queryParams.targetCode === 'rate_13') {
        this.$emit('getAttribution', 'edit')
        this.$emit('closeDetailPup', false)
        try {
          // 归因分析事件名称
          this.attributionToAnalyse()
        } catch (error) {
          console.log('归因分析埋点报错：', error)
        }
      } else {
        this.$toast(
          '目前仅13月继续率指标支持归因分析，欢迎体验。当前指标暂不支持归因分析，欢迎向驾驶舱项目组提供分析思路与建议。'
        )
      }
    },
    // 初始化处理数据,处理fields, dataContent
    initPupTiTle() {
      this.titleName = ''
      if (this.curData.detailContent) {
        this.curData.detailContent.fields.map(item => {
          // 处理主指标的数据
          if (item.role === 'measure' && item.type === 'primary') {
            if (JSON.stringify(this.overlapingItem) === '{}') {
              this.titleNumber = this.headerContainer[item.logicCode]
            } else {
              this.titleNumber = this.overlapingItem[item.logicCode]
            }
            this.titleName = item.name + unitFormat(this.titleNumber, item.dataType)
          }
        })
      }

      // const titles = []
      // const lastDataContent = this.dataContent[this.dataContent.length - 1]
      // lastDataContent.fields.map(item2 => {
      //   if (item2.role === 'dim') {
      //     // 赋值主维度的名称
      //     if (this.overlapingItem[item2.logicCode]) {
      //       titles.push(this.overlapingItem[item2.logicCode])
      //     }
      //   }
      // })
      // this.titleDim = titles.join('-')
      if (this.modifyFilter === true) {
        // 点击修改时,无选中拼接数据，不展示
        // this.titleDim = undefined
        this.titleNumber = undefined
        this.curData.detailContent.fields.map(item => {
          if (item.role === 'measure' && item.type === 'primary') {
            this.titleNumber = this.headerContainer[item.logicCode]
          }
        })
      }
    }
  },
  watch: {
    isShowPopup(val) {
      // const str = document.getElementsByClassName('analysisName')[0]
      // this.textContent = str.textContent
      this.headerContainer = this.curData.detailContent.header
      this.initPupTiTle()
    },
    modifyPup(val) {
      this.defaultpupShow = val
      this.titleDim = undefined
      this.headerContainer = this.curData.detailContent.header
      this.$emit('update:overlapingItem', {})
      this.initPupTiTle()
    },
    trackStatusnum(a) {
      this.defaultpupShow = a
    }
  }
}
</script>

<style lang="scss" scoped>
.popupContent {
  width: 100%;
  background-color: $light-bc;
  border-radius: 20px 20px 0px 0px;
  bottom: -1px;
  .closePopup {
    line-height: 36px;
    text-align: center;
    opacity: 0.64;
  }
  .analysisTitle {
    width: 335px;
    margin: 0px auto;
    background-color: $dark-grey;
    padding: 14px 16px 6px 16px;
    .analysisName {
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
    }
    .analysisNumber {
      color: #ffb440;
      line-height: 38px;
      font-weight: 600;
      font-size: 28px;
    }
  }
  .pupButtonGroup {
    padding: 14px 16px 0px 16px;
    display: flex;
    justify-content: space-around;
    .pupButton {
      height: 44px;
      font-size: 16px;
      // width: 75px;
      border-radius: 2px;
      .istracked {
        width: 50px;
      }
    }
    .noModifyPupButton {
      width: 183px;
    }
  }
  .detailPopupLine {
    padding-top: 20px;
    .bottomline {
      border-bottom: 1px solid $light-grey;
    }
  }
  .detailPopup {
    padding-top: 20px;
  }
  .fadeHeight-enter-active,
  .fadeHeight-leave-active {
    transition: all 0.5s;
    max-height: 314px;
  }
  .fadeHeight-enter,
  .fadeHeight-leave-to {
    max-height: 0px;
  }
}
.van-field {
  .van-field__value {
    display: flex;
    align-items: center;
  }
}
</style>
